<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>infinite</title>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />

  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="echarts/echarts.js"></script>
  <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/hexadecimal.js"></script>
</head>

<body>
  <h3>js中规定安全整数的范围是-2^53~2^53，所以大于 9007199254740991 的数进制转换会存在精度问题</h3>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">当前数值进制</span>
    <input id="currentNumber" value="10" type="number" class="form-control" placeholder=""
      aria-describedby="basic-addon1">
  </div>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">转换前的自定义进制字符</span>
    <input id="inputCode" type="text" class="form-control" placeholder="如果不填写，则按照默认" aria-describedby="basic-addon1">
  </div>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">转换后的进制</span>
    <input id="toNumber" value="2" type="number" class="form-control" placeholder="" aria-describedby="basic-addon1">
  </div>

  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">转换后的自定义进制字符</span>
    <input id="transformationCode" type="text" class="form-control" placeholder="如果不填写，则按照默认"
      aria-describedby="basic-addon1">
  </div>

  <div class="input-group">
    <input id="info" value="123" type="text" class="form-control" placeholder="转换内容">
    <span class="input-group-btn"><button onclick="convert()" class="btn btn-default" type="button">转换</button></span>
  </div>

  <div>
    <textarea id="result" style="width: 100%;height: 200px;"></textarea>
  </div>

  <div>各个进制定义的符号不一样，像32和64的进制使用的字符顺序与平时不一样，因此需要留意，详细定义规则见下</div>
  <a href="http://tools.ietf.org/html/rfc4648">
    <p>进制规范文档：The Base16, Base32, and Base64 Data Encodings</p>
  </a>
  <a href="http://www.crockford.com/wrmg/base32.html">
    <p>32进制规范 </p>
  </a>

  <a href="js/BinaryRule.js">
    <p>默认转换规则</p>
  </a>
  <p>如果是使用自定义进制字符，可以扩展更高位进制，或者进行数据信息加密处理</p>

  <script>

    function convert() {
      var inputCodeNumber = $("#currentNumber").val();
      var transformationCodeNumber = $("#toNumber").val();
      var info = $("#info").val();
      var inputCode;
      var transformationCode;
      var result;
      if ($("#inputCode").val() == "") {
        inputCode = charSelect(inputCodeNumber);
      } else {
        inputCode = $("#inputCode").val();
      }
      if ($("#transformationCode").val() == "") {
        transformationCode = charSelect(transformationCodeNumber);
      } else {
        transformationCode = $("#transformationCode").val();
      }
      result = hexadecimalConversion(hexadecimalReversal(info, inputCodeNumber, inputCode), transformationCodeNumber, transformationCode);
      $("#result").val(result);
    }
  </script>
</body>

</html>